<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <meta charset="UTF-8">
    <title>登录Eureka</title>
    <style>
        *{
            box-sizing: border-box;
        }
        body,html{
            padding: 0;
            margin: 0;
            height: 100%;
            background: #34302d;
        }
        .wrapper{
            height: 100%;
            display: flex;
            align-items: center;
            text-align: center;
        }
        .wrapper > div{
            background: #FFFFFF;
            -webkit-border-radius: .25rem;
            -moz-border-radius: .25rem;
            border-radius: .25rem;
            width: 25rem;
            display: inline-block;
            margin: 0 auto;
            -webkit-box-shadow:  0 5px 15px rgba(0,0,0,.25);
            -moz-box-shadow:  0 5px 15px rgba(0,0,0,.25);
            box-shadow:  0 5px 15px rgba(0,0,0,.25);
        }
        form{
            padding:2rem 3rem;
            margin: 0;
        }
        form input,form button{
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            margin: 1rem 0;
            outline: none;
        }
        form input{
            display: block;
            width: 100%;
            padding:.75rem;
            font-size: 1rem;
            line-height: 1.5;
            color: #495057;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid #ced4da;
            border-radius: .25rem;
            transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
        }
        form button{
            display: block;
            font-weight: 400;
            width: 100%;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            border: 1px solid #34302d;
            padding: .75rem 0;
            font-size: 1rem;
            line-height: 1.5;
            border-radius: .25rem;
            transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
            color: #fff;
            background-color: #34302d;
        }
        form input:focus{
            color: #495057;
            background-color: #fff;
            border-color: #6DB33F;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(109, 179, 63, 0.7);
        }
        form button:focus{
            box-shadow: 0 0 0 0.2rem rgba(109, 179, 63, 0.7);
        }
        form button:hover{
            color: #fff;
            background-color: #396429;
            border-color: #2f5928;
        }
        .alert{
            position: relative;
            padding: .75rem 1.25rem;
            margin-bottom: 1rem;
            border: 1px solid transparent;
            border-radius: .25rem;
            -webkit-transition: height .2s ease-in-out,padding .2s ease-in-out,opacity .2s ease-in-out;
            -moz-transition: height .2s ease-in-out,padding .2s ease-in-out,opacity .2s ease-in-out;
            -ms-transition: height .2s ease-in-out,padding .2s ease-in-out,opacity .2s ease-in-out;
            -o-transition: height .2s ease-in-out,padding .2s ease-in-out,opacity .2s ease-in-out;
            transition: height .2s ease-in-out,padding .2s ease-in-out,opacity .2s ease-in-out;
            opacity: 1;
        }
        .alert-error{
            color: #721c24;
            background-color: #f8d7da;
            border-color: #f5c6cb;
        }
        .alert-success{
            color: #155724;
            background-color: #d4edda;
            border-color: #c3e6cb;
        }
        .fade-out{
            height: 0;
            padding: 0;
            opacity: 0;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div>
        <div></div>
           <form name="f" th:action="@{/login}" method="post">
               <div th:if="${param.error}" class="alert alert-error">
                   用户名或密码错误.
               </div>
               <div th:if="${param.logout}" class="alert alert-success">
                   登录已失效.
               </div>
                   <input type="text" autocomplete="off" placeholder="用户" id="username" name="username"/>
                   <input type="password" placeholder="密码" id="password" name="password"/>
                   <button type="submit" class="btn">登录</button>
           </form>
    </div>
</div>
</body>
<script>
    (function(){
        var alertDom = document.getElementsByClassName("alert")[0];
        if(alertDom){
            setTimeout(function(){
                alertDom.classList.add("fade-out");
                setTimeout(function(){
                    alertDom.remove();
                },200);
            },3000);
        }
    })();
</script>
</html>